<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            margin-top: 20px;
        }

        #title {
            line-height: 60px;
            font-size: 32px;
        }

        .list li {
            line-height: 40px;
            border: 1px dashed #333;
            text-indent: 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2 id="title">标题</h2>
        <ul class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
</body>
<script>
    // DOM操作  =>  获取元素,操作元素(修改元素的内容 属性 样式 绑定事件),元素的增删改查

    // 目的: 对DOM操作进行封装,可以方便用户快捷获取元素,操作元素,以及元素的增删改查

    // 面向过程:

    // 单元素  => 获取元素之后,直接操作
    // var title = document.getElementById("title");  // h2
    // title.innerText = "hello";

    // 多元素  => 获取元素之后, 遍历元素的集合,操作集合中的每一个元素
    // var list = document.querySelectorAll(".list li"); // [li,li,li,li,li,li]
    // for (var i = 0; i < liList.length; i++) {
    //     var li = liList[i];
    //     li.innerText = "world";
    // }

    // 对比发现,单元素和多元素处理机制还是稍微有些区别 => 后期封装还要考虑单元素还是多元素 => 麻烦

    // 怎么解决?
    // 统一将获取的元素放到集合中, 统一遍历处理 (不管是单个元素还是多个元素)  =>  document.querySelectorAll()

    // var list = document.querySelectorAll("#title");
    // for (var i = 0; i < list.length; i++) {
    //     var ele = list[i];
    //     ele.innerText = "hello";
    // }

    // var list = document.querySelectorAll(".list li");
    // for (var i = 0; i < list.length; i++) {
    //     var ele = list[i];
    //     ele.innerText = "world";
    // }

    // console.log("------------------------------------------------------------");

    // 获取元素
    var list = document.querySelectorAll(".list li");

    // 操作元素
    // 1. 设置innerText
    function setText(con) {
        for (var i = 0; i < list.length; i++) {
            var ele = list[i];
            ele.innerText = con;
        }
    }
    function getText() {
        // 获取每一个放到数组中
        // var arr = [];
        // for (var i = 0; i < list.length; i++) {
        //     var ele = list[i];
        //     arr.push(ele.innerText);
        // }
        // return arr;

        // 模拟jquery   => 默认返回集合中的第一个
        return list[0].innerText;
    }

    function on(type, callback) {
        for (var i = 0; i < list.length; i++) {
            var ele = list[i];
            ele.addEventListener(type, callback)
        }
    }
    function off(type, callback) {
        for (var i = 0; i < list.length; i++) {
            var ele = list[i];
            ele.removeEventListener(type, callback)
        }
    }





</script>

</html>